<template>
  <div
    class="data-card"
    :style="{
      backgroundColor: bgColor,
      color: textColor
    }"
  >
    <div class="data-value">{{ dataValue }}</div>
    <div class="data-label">{{ dataLabel }}<span class="mask-item">√</span></div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  // 数据值，如“55.%”“68.5%”等
  dataValue: {
    type: String,
    required: true,
  },
  // 数据标签，如“资源总量”等
  dataLabel: {
    type: String,
    required: true,
  },
  // 卡片背景色，默认蓝色
  bgColor: {
    type: String,
    default: '#165DFF',
  },
  // 文字颜色，默认白色
  textColor: {
    type: String,
    default: '#fff',
  },
});
</script>

<style lang="scss" scoped>
.data-card {
  padding: 10px;
  width: 180px;
  height: 90px;
  border-radius: 8px;
  flex-direction: column;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  .data-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .data-label {
    font-size: 14px;
    .mask-item{
     float: right;
    }
  }


  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  &:hover .check-mark::after {
    opacity: 1;
  }
}
</style>
